﻿@model NogginBox.BingMapList.ViewModels.EditBingMapListViewModel
@using NogginBox.BingMapList
@{
	Style.Include("map");
	Script.Require("jQuery");
	Script.Include("http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=initMap");
	Script.Include("maplist.js");
	
	// Set size with units
	var width = (Model.Width != null) ? Model.Width + "pt" : "100%";
	var height = Model.Height + "pt";
}
@using(Script.Foot()) {
<script type="text/javascript">
	var map;
	var pin;

	function getDimension(d) {
		return (d === "") ? "100%" : parseInt(d, 10);
	}

	function onTextLatLongChange() {
		var loc = newLocation($("#CenterLatitudeStr").val(), $("#CenterLongitudeStr").val());
		map.setView({center:loc});
	}

	function onTextMapTypeChange() {
		map.setView({mapTypeId: $("#MapType").val()});
	}

	function resetMapSize() {
		var w = getDimension($("#Width").val());
		var h = getDimension($("#Height").val());
		$("#BingEditMap").width(w);
		$("#BingEditMap").height(h);
		map.setOptions({width: w, height: h});
	}

	function onTextHeightChange() {
		resetMapSize();
	}

	function onTextWidthChange() {
		resetMapSize();
	}

	function onViewChange() {
		var z = Math.floor(map.getZoom());
		$("#Zoom").val(z);

		var loc = map.getCenter();
		$("#CenterLatitudeStr").val(loc.latitude);
		$("#CenterLongitudeStr").val(loc.longitude);
	}

	function onTypeChange() {
		$("#MapType").val(map.getMapTypeId());
	}

	function onZoomTextSet() {
		var z = parseInt($("#Zoom").val(), 10);
		map.setView({zoom: z});
	}

	function initMap() {
		var loc = newLocation(@Model.CenterLatitudeStr, @Model.CenterLongitudeStr);
		map = newMap("BingEditMap", loc, @Model.Zoom, "@(Ajax.JavaScriptStringEncode(Model.MapType))");
		
		@{var c = 0; var cCount = Model.BingLocations.Count() - 1;}
		var pins = [
		@foreach (NogginBox.BingMapList.Models.BingLocationPart location in Model.BingLocations)
		{<text>{Id: @(location.ContentItem.Id), Lat: @Html.toInvariantCultureString((float)location.Latitude), Lng: @Html.toInvariantCultureString((float)location.Longitude), Title: "@Ajax.JavaScriptStringEncode(Model.Titles[c])", Icon: "@Ajax.JavaScriptStringEncode(location.MapIcon)", Url: "@Url.ItemDisplayUrl(location.ContentItem)"}</text>if (c < cCount) { @(",")}c++;}];
		addPins(pins, map, "@Model.MapIconFolder");

		Microsoft.Maps.Events.addHandler(map, "viewchangeend", onViewChange);
		Microsoft.Maps.Events.addHandler(map, "maptypechanged", onTypeChange);
	}
	$(window).load(initMap);

	$(function() {
		$("fieldset legend").expandoControl(function (controller) { return controller.nextAll(".expando"); }, { collapse: true, remember: false });
		$("#Zoom").change(onZoomTextSet);
		$("#Width").change(onTextWidthChange);
		$("#Height").change(onTextHeightChange);
		$("#CenterLatitudeStr").change(onTextLatLongChange);
		$("#CenterLongitudeStr").change(onTextLatLongChange);
		$("#MapType").change(onTextMapTypeChange);
	});
</script>
}
<fieldset>
	<legend>Bing map list area</legend>
	<div id="BingEditMap" class="BingLocation" style="position:relative; width:@(width); height:@(height);"></div>	
</fieldset>


<fieldset style="clear: both;">
	<legend>@T("Map properties")</legend>
	<div class="expando">
		<div class="editor-label">
			@Html.LabelFor(m => m.Width)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.Width)
			@Html.ValidationMessageFor(m => m.Width)
		</div>

		<div class="editor-label">
			@Html.LabelFor(m => m.Height)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.Height)
			@Html.ValidationMessageFor(m => m.Height)
		</div>
	
		<div class="editor-label">
			@Html.LabelFor(m => m.CenterLatitudeStr)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.CenterLatitudeStr)
			@Html.ValidationMessageFor(m => m.CenterLatitudeStr)
		</div>

		<div class="editor-label">
			@Html.LabelFor(m => m.CenterLongitudeStr)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.CenterLongitudeStr)
			@Html.ValidationMessageFor(m => m.CenterLongitudeStr)
		</div>

		<div class="editor-label">
			@Html.LabelFor(m => m.Zoom)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.Zoom)
			@Html.ValidationMessageFor(m => m.Zoom)
		</div>

		<div class="editor-label">
			@Html.LabelFor(m => m.MapType)
		</div>
		<div class="editor-field">
			@Html.DropDownListFor(m => m.MapType, Model.MapTypeList)
			@Html.ValidationMessageFor(m => m.MapType)
		</div>
	</div>
</fieldset>